<!DOCTYPE html>
<html>
  <head>
    <title>arteditor</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <link rel='stylesheet' href='/css/style.css' />
  </head>
  <body>
  <style type="text/css">
.publish-article-title{padding:15px;background:#fff;margin-bottom:10px;border:1px solid #ccc;}
.title-tips{font-weight:bold;margin-bottom:3px;}
.publish-article-content{padding:15px;background:#fff;border:1px solid #ccc;}
.publish-article-content .article-content{height:200px;border-bottom:1px solid #ccc;}
.publish-article-content .footer-btn{text-align:center;padding-top:10px;}
.publish-article-content .footer-btn .upload-img{display:inline-block;vertical-align:bottom;width:25px;height:20px;margin-right:10px;background:url(/images/img.png) 0 no-repeat;background-size:100%;}
  </style>
    <h1 style="padding:5px;margin:5px; text-align:center;">arteditor</h1>

    <form action="/upload" method="post" enctype="multipart/form-data">
        <div style="width:320px;margin: 0 auto;">
          <div class="publish-article-title">
            <div class="title-tips">标题</div>
            <input type="text" id="title" class="w100" placeholder="文章标题">
          </div>
          <div class="publish-article-content">
            <div class="title-tips">正文</div>
            <input type="hidden" id="target">
            <div class="article-content" id="content">
            </div>
            <div class="footer-btn g-image-upload-box">
              <div class="upload-button" style="position: relative">
                <span class="upload"><i class="upload-img"></i>插入图片</span>
                <input class="input-file" id="imageUpload" type="file" name="fileInput" accept="image/*" style="position:absolute;left:0;top:10px;opacity:0;width:100%;">
              </div>
            </div>
          </div>
        </div>
        <div style="padding:5px;margin:5px; text-align:center;"> <input type="submit" value="submit" id="js_submit"/></div>
    </form>
   <script src="/javascripts/jquery-1.11.2.js"></script>
   <script src="/javascripts/plugin/artEditor.js"></script>
    <script>
      $(function() {
          "use strict";

          $('#content').artEditor({
            imgTar: '#imageUpload',
            limitSize: 5,   // 兆
            showServer: true,
            uploadUrl: '/arteditorupload',
            base64:false,
            data: {},
            uploadField: 'image',
            placeholader: '<p>请输入文章正文内容</p>',
            validHtml: ["<br/>"],
            formInputId: 'target',
            uploadSuccess: function(res) {
               //return img url
              return "http://172.16.61.102:3000/"+res.path;
            },
            uploadError: function(res) {
              // something error
              console.log(res);
            }
          });
     
          //提交
          $("#js_submit").click(function(e){
             e.preventDefault();
            //$('#content').parents("form").submit();
          });


        });
    </script>
  </body>
</html>
